<script>
const app = getApp();
export default {
  name: "td-challenge",
  props: {
    // 挑战赛数据 isTimeOut: 1 还未到报名时间 2 已报名，3 活动已结束
    challengeData: {
      type: Array,
      default: []
    },

  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurlBwc,
      // 当前选中的菜单索引
      currentMenuIndex: 0,
      // 是否处于报名期间
      isTimeSignUp: false,
      // 挑战赛详情
      challengeDetail: {},
      // 是否显示报名弹窗
      isShowSignUp: false,
      // 所属地区是否开启挑战赛
      isChallengeOpen: false,

    }
  },
  methods: {

    /* swiper的change事件 */
    challengeChange(e){
      let that = this
      that.currentMenuIndex = e.detail.current;
    },
    /* 挑战赛报名弹窗 */
    goShowSignUp(item){
      //console.log('挑战赛详情', item)
      let that = this
      let token = uni.getStorageSync('token')
      // 判断是否登录
      if (!token) {
        uni.navigateTo( {
          url: '/pages/login/login'
        })
        return
      }
      // 重置报名弹窗规则
      this.check_on = 0
      // 显示挑战赛弹窗
      that.isShowSignUp = true
      // 挑战赛详情
      that.challengeDetail = item
      this.$emit('ShowSignUp', that.challengeDetail)
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_time).getTime()
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      // console.log('结束时间', seconds)
      return seconds
    },

    // 倒计时结束后执行
    countDownEndFun(){
      uni.reLaunch({
        url: '/pages/index/index'
      })
      console.log('倒计时结束')
    },

  }
}
</script>

<template>
  <view class="td_challenge">
    <swiper class="challenge_swiper" :autoplay="false" interval="5000" @change="challengeChange" >
      <swiper-item v-for="(item, index) in challengeData" :key="index" style="width: 100%;height: 150rpx;">
        <view class="label_text">
          {{ currentMenuIndex + 1 }}/{{ challengeData.length }}
        </view>
        <view class="challenge_swiper_item">
          <view class="challenge_item_img">
            <view class="challenge_item_img_text">
              <text style="font-size: 48rpx">{{ item.reward_value ? item.reward_value.split('.')[0] : 0 }}</text>
              <text style="font-size: 26rpx">元</text>
            </view>
            <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="challenge_item_content">
            <view class="challenge_item_content_title">
              <view class="challenge_item_content_title_text ellipsis-one-line">{{ item.title }}</view>
              <view class="challenge_item_content_title_msg ellipsis-two-line">{{ item.description }}</view>
            </view>
            <view v-if="item.user_challenge_status === 1" class="challenge_item_content_time" style="color: #888888;font-size: 26rpx;text-align: center;">
              <view style="padding-bottom: 6rpx;">活动倒计时</view>
              <u-count-down
                  :timestamp="findcountdown(item)"
                  @end="countDownEndFun"
                  :show-days="true"
                  :show-seconds="true"
                  :show-border="true"
                  :show-day-colon="true"
                  font-size="26"
                  height="30"
                  color="#FF7900"
                  border-color="transparent"
                  bg-color="transparent"
                  separator="colon"
                  separator-size="20"
                  separator-color="#FF7900">
              </u-count-down>
              <!--<view>时间内完成任务</view>-->
            </view>
            <view v-if="item.isTimeOut === 1" class="challenge_item_content_cancelBtn">活动未开始</view>
            <view v-if="item.isTimeOut === 2 && item.user_challenge_status === 0" @click="goShowSignUp(item)" class="challenge_item_content_btn">免费报名</view>
            <view v-if="item.isTimeOut === 3 && item.user_challenge_status === 0" class="challenge_item_content_cancelBtn">活动已结束</view>

          </view>
        </view>
      </swiper-item>
    </swiper>


  </view>
</template>

<style lang="scss">
page {
  background-color: #F5F5F5;
  width: 100%;
  height: 100%;
}
/* 挑战赛内容css */
.td_challenge{
  width: 100%;
  height: 150rpx;
  .challenge_swiper{
    position: relative;
  }
  .label_text {
    background-color: #FFEED4;
    width: 76rpx;
    text-align: center;
    border-radius: 0 20rpx 0 20rpx;
    font-size: 28rpx;
    padding: 2rpx;
    position: absolute;
    top: 0;
    right: 0;
    color: #FF5429;
  }
  .challenge_swiper_item{
    padding: 16rpx;
    border-radius: 24rpx;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex: 1;
    .challenge_item_img{
      width: 108rpx;
      height: 120rpx;
      position: relative;
      .challenge_item_img_text{
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        position: absolute;
        top: 0;
        color: #FA642B;
        text-align: center;
      }
    }
    .challenge_item_content{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: transparent;
      .challenge_item_content_title{
        width: calc(100% - 150rpx);
        margin-left: 10rpx;
        .challenge_item_content_title_text{
          font-size: 28rpx;
          color: #3D3D3D;
          font-weight: bold;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
        .challenge_item_content_title_msg{
          line-height: 36rpx;
          font-size: 26rpx;
          color: #888888;
        }
      }
      .challenge_item_content_btn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        background: linear-gradient( 90deg, #FD3F03 0%, #FE7F08 100%);
        border-radius: 30rpx;
      }
      .challenge_item_content_cancelBtn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 26rpx;
        color: #888888;
        text-align: center;
      }
      .during{
        width: 160rpx;
        height: 110rpx;
        line-height: 30rpx;
        color: #888888;
        background: #FFFFFF;
        border: 2rpx solid #888888;
        padding: 10rpx 0;
      }
    }
  }

}
/* 免费报名弹窗 */
.sign_up_box{
  padding: 20rpx;
  .sign_warp{
    display: flex;
    .challenge_item_img{
      width: 108rpx;
      height: 120rpx;
      position: relative;
      .challenge_item_img_text{
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        position: absolute;
        top: 0;
        color: #FA642B;
        text-align: center;
      }
    }
    .challenge_item_content{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .challenge_item_content_title{
        margin-left: 10rpx;
        .challenge_item_content_title_text{
          font-size: 28rpx;
          color: #222222;
          font-weight: bold;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
        .challenge_item_content_title_msg{
          font-size: 26rpx;
          color: #888888;
        }
      }
    }
  }
  .sign_content{
    padding-bottom: 160rpx;
    .sign_content_warp{
      .sign_content_title{
        font-size: 32rpx;
        line-height: 80rpx;
      }
      .sign_content_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        line-height: 50rpx;
      }
    }
  }
  .sign_up_box_btn{
    height: 210rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: #FFFFFF;
    box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
    padding-left: 20rpx;
    padding-right: 20rpx;
    .sign_up_box_rule{
      display: flex;
      align-items: center;
      text-align: center;
      height: 80rpx;

      font-size: 24rpx;
      .check_icon {
        width: 34rpx;
        height: 34rpx;
        position: relative;
        margin-right: 7rpx;
      }
      .sign_up_box_rule_text{
        line-height: 80rpx;
        color: #666666;
        margin-left: 10rpx;
      }
    }
    .sign_up_box_text{
      width: 100%;
      height: 68rpx;
      line-height: 68rpx;
      color: #FFFFFF;
      text-align: center;
      font-size: 28rpx;
      border-radius: 50rpx;
      background: linear-gradient( 180deg, #FE7F08 0%, #FD3F03 100%);
    }
  }
}
</style>